import { Component, OnInit } from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {equalValidator, mobileAsyncValidator, mobileValidator} from "../validator/validator";

@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {

  formModel: FormGroup;

  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      // username: ['', Validators.required],
      username: ['', [Validators.required, Validators.minLength(6)]],
      // mobile: ['', mobileValidator, mobileAsyncValidator],
      mobile: ['', mobileValidator],
      passwordsGroup: fb.group({
        password: ['', Validators.minLength(6)],
        pconfig: ['']
      }, {validator: equalValidator})
    })
  }

  // constructor() {
  //   this.formModel = new FormGroup({
  //     username: new FormControl(),
  //     mobile: new FormControl(),
  //     passwordsGroup: new FormGroup({
  //       password: new FormControl(),
  //       pconfig: new FormControl()
  //     })
  //   })
  // }

  onSubmit() {
    // let isValid: boolean = this.formModel.get('username').valid;
    // console.log("username的校验结果："+isValid);
    // let errors: any = this.formModel.get('username').errors;
    // console.log("username的错误信息："+JSON.stringify(errors));
    // console.log(this.formModel.value);
    if(this.formModel.valid){
      console.log(this.formModel.value);
    }
  }

  ngOnInit() {
  }

}
